<template>
    <div class="block">
       <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="handlePrevClick"
                @next-click="handleNextClick"
                :current-page="pages.currentPage"
                :page-size="pages.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pages.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
  props: {
    pages: {
      size: {
        type: Number,
        require: true
      },
      total: {
        type: Number,
        require: true
      },
      currentPage: {
        type: Number,
        require: true
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.$emit('getPageData', val)
      console.log(`当前页是: ${val}`)
    },
    handlePrevClick (val) {
      console.log('prev' + val)
    },
    handleNextClick (next) {
      console.log('next:' + next)
    }
  },
  data () {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  mounted: function () {
    console.log(this.pages)
  }
}
</script>
